<template>
  <el-dialog
    v-el-drag-dialog
    :visible.sync="dialogVisible"
    title="个人中心"
    append-to-body
    :close-on-click-modal="false"
    width="600px"
  >
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" size="small" label-width="100px" label-position="left">
      <el-form-item label="账号：" prop="loginName">
        <el-input v-model="ruleForm.loginName" disabled size="small" maxlength="10" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户名：" prop="userName">
        <el-input v-model="ruleForm.userName" size="small" maxlength="10" clearable></el-input>
      </el-form-item>
      <el-form-item label="性别：">
        <el-radio-group v-model="ruleForm.userSex">
          <el-radio label="1">
            男
          </el-radio>
          <el-radio label="0">
            女
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="loading" size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button :loading="loading" size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
// 接口
import { personInfo, personUpdateInfo } from '@/api/person'
// 规则
import rules from './rules'
export default {
  name: 'PersonalInfoForm',
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      ruleForm: {},
      rules
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (newValue) {
        this.$emit('update:visible', newValue)
      }
    }
  },
  mounted () {
    // 获取表单数据
    this.getFormData()
  },
  methods: {
    // 验证
    validateSubmit (ruleForm) {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.submit(ruleForm)
        } else {
          return false
        }
      })
    },
    // 提交
    async submit (ruleForm) {
      console.log(ruleForm)
      this.loading = true
      const res = await personUpdateInfo(ruleForm)
      this.loading = false
      if (res.code === '0000') {
        this.$message({
          message: '更新用户信息成功',
          type: 'success'
        })
        this.$store.commit('SET_NAME', ruleForm.userName)
        this.getFormData()
      }
    },
    close () {
      this.closeView(this.$route)
    },
    // 获取表单数据
    async getFormData () {
      const res = await personInfo()
      if (res.code === '0000') {
        this.ruleForm = res.data || {}
      }
    },
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.app-rule-form{
  max-height: calc(100vh - 145px);
  overflow-y: auto;
}
</style>
